<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>复选框</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		
		.check_mian_contaienr{
			margin: 25px auto;
			border: 1px solid #d9d9d9;
			padding: 25px 0 10px 0;
			width: 630px;
		}
		.check_main_content{
			margin-bottom: 10px;
			padding: 0 25px;
		}
		.check_main_content:last-child{
			margin-bottom: 0;
		}
		.check_mainFirst_content{
			display: flex;
			align-items: center;
		}
		.check_mainFirstSvg_container{
			margin-right: 10px;
		}
		.check_mainSecond_content{
			padding-left: 42px;
			padding-top: 10px;
		}
		.check_mainSecond_content .layui-unselect{
			padding-bottom: 10px
		}
		.check_mainFirstSvg_container svg{
			cursor: pointer;
		}
		.check_mainFirstSvg_container svg:last-child{
			display: none;
		}
		.layui-unselect{
			width: 130px;
    		overflow: hidden;
		}
		.layui-unselect span{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
		}
		.check_mianButton_contaienr{
			display: flex;
			justify-content: flex-end;
			border-top: 1px solid #ececec;
			padding: 10px 25px 0 25px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" method="post" id="form1">
		<div class="check_mian_contaienr">
			{loop $etTagArr as $ettag}
			<div class="check_main_content">
				<div class="check_mainFirst_content">
					<div class="check_mainFirstSvg_container">
						<svg id="svghide_1" viewBox="0 0 1024 1024" focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg>
						<svg id="svgshow_1" viewBox="0 0 1024 1024" focusable="false" class="" data-icon="caret-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"></path></svg>
					</div>
					<input type="checkbox" name="group" title="{$ettag['group_name']}" lay-skin="primary"> 
				</div>
				<div class="check_mainSecond_content">
				 {loop json_decode($ettag['tags'],1) as $tag}
					<input type="checkbox" name="tags" value="{$tag['id']}" title="{$tag['name']}" lay-skin="primary"> 
				 {/loop}	
				</div>
			</div>
			{/loop}
			<div class="check_mianButton_contaienr">
				<!--<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>-->
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="tijiao()">确定</button>
			</div>
		</div>
	</form>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
	function tijiao(){
		parent.$("#checkLableCon").empty();
		var obj = document.getElementsByName('tags');
		var checkTag = new Array();
		var html = '';
		for (var i = 0; i < obj.length; i++) {
			if (obj[i].checked){
				checkTag.push(obj[i].value);
				html += '<span><b>'+obj[i].title+'</b></span>&nbsp;';
			} 
		}
		console.log(checkTag);
		parent.$("#checkLableCon").append(html);
		parent.$("#checkLable").val(checkTag);
		parent.layer.closeAll('iframe');
	}
	</script>
	<script>
	//Demo
	layui.use('form', function(){
		var form = layui.form;

	  //监听提交
	  form.on('submit(formDemo)', function(data){
	  	layer.msg(JSON.stringify(data.field));
	  	return false;
	  });
	});
	</script>
	<script src="/cdn/jquery.js"></script>
	<script type="text/javascript">
		// 循环一下后面的_1
		$('#svghide_1').click(function(){
			$(this).hide();
			$(this).next().show();
			$(this).parent().parent().next().hide();
		})
		$('#svgshow_1').click(function(){
			$(this).hide();
			$(this).prev().show();
			$(this).parent().parent().next().show();
		})
	</script>
</body>
</html>